import { Form, Input, Button, message } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { history } from 'umi';

import styles from './global.less';

let onFinish = (values: any) => {
	if (values.username && values.password) {
		message.success('Login succeeded!');
		sessionStorage.setItem('isLogin', '1');
		setTimeout(() => {
			history.push('/home');
		}, 1000)
	}
};

export default () => {
	return (
		<div className={styles.loginPage} >
			<div className={styles.loginBlock}>
				<Form name="normal_login" initialValues={{ remember: true }} onFinish={onFinish}>
					<Form.Item name="username" rules={[{ required: true, message: 'Please input your Username!' }]}>
						<Input size="large" prefix={<UserOutlined />} placeholder="Username" />
					</Form.Item>
					<Form.Item name="password" rules={[{ required: true, message: 'Please input your Password!' }]}>
						<Input size="large" prefix={<LockOutlined />} type="password" placeholder="Password" />
					</Form.Item>
					<Form.Item>
						<Button size="large" type="primary" htmlType="submit" className={styles.loginBtn}>Log in</Button>
					</Form.Item>
				</Form>
			</div>
		</div>
	);
};